{% extends "sidebar.html" %}

{% block jsfuncs %}


del_widget = function(widget_id) {

	var log = $('load_img').setStyles({'display':'inline'});
	
	var req = new Request.HTML({ 	url: '/admin/sidebar/widgets/del',
	 									  	method: 'post',
										  	evalScripts : true,
										  	data: 'id=' + widget_id,
											onComplete: function(e) {
												log.setStyles({'display':'none'});
											}
										}).send();

	return false;
	
};

new_widget = function (widget_id,widget_name,widget_title,widget_text) {
	
	var el = new Element('tr', {'id': widget_id});
	var td_del_widget = new Element('td',{'class':'td_button'}).injectInside(el);
	var del_widget_a = new Element('a', {
				'class': 'del',
				'events': {
							'click': function(){
 									del_widget(widget_id);
									}
							},
				'href': '#'
				}).set('text','Del').injectInside(td_del_widget);
	
	var td_edit_widget = new Element('td',{'class':'td_button'}).injectAfter(td_del_widget);
	var edit_widget_a = new Element('a', {
				'class': 'edit',
				'events': {
							'click': function(){
										edit_widget(widget_id);
									}
							},
				'href': '#'
				}).set('text','Edit').injectInside(td_edit_widget);
	
	var td_name = new Element('td', {'class': 'widget_name'}).set('text',widget_name).injectAfter(td_edit_widget);
	var td_title = new Element('td', {'class': 'widget_title'}).set('text',widget_title).injectAfter(td_name);
	var td_text = new Element('td',{'class': 'widget_text'}).injectAfter(td_title);
	td_text.set('html', widget_text);
	$('widget_table').adopt(el);
	$('id_widget').value = '';
	$('edit_button').set('styles',{'display':'none'});
	$('new_button').set('styles',{'display':'inline'});
	$('widget_form').reset();
		
};

edit_widget = function(widget_id) {
	var tr = $(widget_id);
	$('id_widget').value = widget_id;
	$('id_name').value = tr.getElement('td.widget_name').get('html');
	$('id_title').value  = tr.getElement('td.widget_title').get('html');
	$('id_text').set('text',tr.getElement('.widget_text').get('text'));
	$('edit_button').set('styles',{'display':'inline'});
	$('new_button').set('styles',{'display':'none'});
	return false;
};

replace_widget = function(widget_id,name,title,text) {
	$('id_widget').value = '';
	var tr = $(widget_id);
	tr.getElement('td.widget_name').set('html',name);
	tr.getElement('td.widget_title').set('html',title);
	tr.getElement('.widget_text').set('text',text);
	$('edit_button').setStyles({'display':'none'});
	$('new_button').setStyles({'display':'inline'});
	
};

$('new_button').addEvent('click', function(e) {
	new Event(e).stop();
	var log = $('load_img').setStyles({'display':'inline'});
   $('widget_form').set('send',{
		evalScripts: true,
		onComplete: function() {
			log.setStyles({'display':'none'});
		}
	});
	$('widget_form').send();
});

$('reset_button').addEvent('click', function(e) {
	$('edit_button').set('styles',{'display':'none'});
	$('new_button').set('styles',{'display':'inline'});
	$('id_widget').value = '';
});

$('edit_button').addEvent('click', function(e) {
	new Event(e).stop();
	var log = $('load_img').setStyles({'display':'inline'});
   var req = new Request.HTML({ 	url: '/admin/sidebar/widgets/edit',
	 									  	method: 'post',
										  	evalScripts : true,
										  	data: $('widget_form').toQueryString(),
											onComplete: function(e) {
												log.setStyles({'display':'none'});
											}
										}).send();

	return false;
});

{% endblock %}

{% block content %}
<h3>Widgets list</h3>
<div id="widget_list">
<table id="widget_table">
{% if widgets.count %}

		<tr>
		<td class="td_button"></td>
		<td class="td_button"></td>
		<th>Name</th>
		<th>Title</th>
		<th>Text</th>
		</tr>

	{% for widget in widgets %}
		<tr id="{{widget.key}}">
			<td class="td_button"><a href="#" onclick="javascript:del_widget('{{widget.key }}');" class="del">Del</a></td>
			<td class="td_button"><a href="#" onclick="javascript:edit_widget('{{widget.key }}');" class="edit">Edit</a></td>	
			<td class="widget_name">{{ widget.name }}</td>
			<td class="widget_title">{% if widget.title %}{{ widget.title }}{% endif %}</td>
			<td><xmp class="widget_text">{{ widget.text }}</xmp></td>
		</tr>
	{% endfor %}

{%else%}
	<h4>There are no links</h4>
{% endif %}
</table>
</div>
<div>

<h3>New Widget</h3>
<form action="/admin/sidebar/widgets/new" method="post" id="widget_form" accept-charset="utf-8">
	<table id="new_widget">
		{{ form }}
<tr><td>
	<input type="hidden" name="id" value="" id="id_widget">
	<input type="submit" name="action" value="New" id="new_button"><input type="submit" name="action" value="Save" id="edit_button" style="display:none;"></td>
	<td><input type="reset" id="reset_button" value="Reset"><img src="/static/images/loading.gif" style="display:none;" id="load_img" />
	</td>
		</table>	
</form>
</div>

{% endblock %}